<template>
  <div class="outer-container">
    <div class="monitor-box">
      <img src="../../images/pm25.png">
      <span class="text pm-color">PM 2.5</span>
      <span class="text-content">{{ dataInfo.pm25Data }}ug/m3</span>
    </div>
    <div class="monitor-box">
      <img src="../../images/pm10.png">
      <span class="text pm-color">PM 10</span>
      <span class="text-content">{{ dataInfo.pm10Data }}ug/m3</span>
    </div>
    <div class="monitor-box">
      <img src="../../images/tsp.png">
      <span class="text pm-color">风速</span>
      <span class="text-content">{{ dataInfo.windSpeedData }}m/s</span>
    </div>

    <div class="monitor-box">
      <img src="../../images/wendu.png">
      <span class="text text-color">温度</span>
      <span class="text-content text-data-color">{{ dataInfo.temperatureData }}℃</span>
    </div>
    <div class="monitor-box">
      <img src="../../images/zaoyin.png">
      <span class="text text-color">噪音</span>
      <span class="text-content text-data-color">{{ dataInfo.noiseData }}db</span>
    </div>
    <div class="monitor-box">
      <img src="../../images/qiya.png">
      <span class="text text-color">气压</span>
      <span class="text-content text-data-color">{{ dataInfo.airPressureData }}kPa</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeEnvironment",
  components: {},
  data() {
    return {
      dataInfo: {}
    };
  },

  methods: {
    getData(data) {
      this.dataInfo = data;
    }
  }
};
</script>

<style scoped lang="scss">
  .outer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 40px;

    .monitor-box{
      width: 33.3%;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 14px;
      margin-top: 24px;

      img{
        width: 60px;
        height: 60px;
      }

      .text{
        line-height: 20px;
        margin-top: 6px;
      }

      .pm-color{
        color: #45E3B1;
      }

      .text-content{
        font-size: 12px;
        color: rgba(69, 227, 177, 0.6);
      }

      .text-color{
        color: #F499FF;
      }

      .text-data-color{
        color: rgba(245, 153, 255, 0.6);
      }
    }
  }
</style>
